<template>
  <div class="dashboard">
    <el-row :gutter="20" class="statistics-container">
      <el-col :span="6" v-for="(item, index) in statistics" :key="index">
        <el-card class="stat-card" :body-style="{ padding: '20px' }">
          <div class="stat-content">
            <div class="stat-icon" :style="{ backgroundColor: item.color }">
              <el-icon size="24"><component :is="item.icon" /></el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-title">{{ item.title }}</div>
              <div class="stat-value">{{ item.value }}</div>
              <div class="stat-change" :class="{ 'is-up': item.isUp }">
                {{ item.change }}
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    

    <el-row :gutter="20" class="content-container">
      <el-col :span="16">
        <el-card class="chart-card">
          <template #header>
            <div class="card-header">
              <span>资产趋势图</span>
              <el-button type="primary" link>查看详情</el-button>
            </div>
          </template>
          <div class="chart-placeholder">
            <el-icon size="60"><TrendCharts /></el-icon>
            <p>资产趋势图表将在此显示</p>
          </div>
        </el-card>
        
      </el-col>
      <el-col :span="8">
        <el-card class="quick-actions-card">
          <template #header>
            <div class="card-header">
              <span>快捷操作</span>
            </div>
          </template>
          <div class="quick-actions">
            <div 
              v-for="(action, index) in quickActions" 
              :key="index"
              class="quick-action-item"
            >
              <router-link :to="action.path" class="action-link">
                <el-icon size="24"><component :is="action.icon" /></el-icon>
                <span>{{ action.title }}</span>
              </router-link>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    
  </div>
</template>


<script setup>
import { ref } from 'vue'
import {
  TrendCharts,
  DataAnalysis,
  Box,
  UserFilled,
  Files,
  Location,
  Warning
} from '@element-plus/icons-vue'

// 统计数据
const statistics = ref([
  {
    title: '资产总数',
    value: '1,234',
    icon: 'Box',
    color: '#409EFF',
    change: '+10.2%',
    isUp: true
  },
  {
    title: '在用资产',
    value: '987',
    icon: 'TrendCharts',
    color: '#67C23A',
    change: '+5.3%',
    isUp: true
  },
  {
    title: '维修中',
    value: '45',
    icon: 'Warning',
    color: '#E6A23C',
    change: '-2.1%',
    isUp: false
  },
  {
    title: '已报废',
    value: '12',
    icon: 'DataAnalysis',
    color: '#F56C6C',
    change: '-1.5%',
    isUp: false
  }
])

// 快捷操作
const quickActions = ref([
  {
    title: '添加资产',
    icon: 'Box',
    path: '/assets/add'
  },
  {
    title: '资产盘点',
    icon: 'Files',
    path: '/inventory'
  },
  {
    title: '资产分配',
    icon: 'UserFilled',
    path: '/allocation'
  },
  {
    title: '位置管理',
    icon: 'Location',
    path: '/locations'
  }
])
</script>



<style scoped>
.dashboard {
  padding: 0;
}

.statistics-container {
  margin-bottom: 20px;
}

.stat-card {
  height: 120px;
}

.stat-content {
  display: flex;
  align-items: center;
  height: 100%;
}

.stat-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
  color: white;
}

.stat-info {
  flex: 1;
}

.stat-title {
  font-size: 14px;
  color: #909399;
  margin-bottom: 8px;
}

.stat-value {
  font-size: 24px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 5px;
}

.stat-change {
  font-size: 12px;
  color: #F56C6C;
}

.stat-change.is-up {
  color: #67C23A;
}

.content-container {
  margin-bottom: 20px;
}

.chart-card {
  height: 400px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.chart-placeholder {
  height: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #909399;
}

.chart-placeholder p {
  margin-top: 15px;
}

.quick-actions-card {
  height: 400px;
}

.quick-actions {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 15px;
  height: 300px;
}

.quick-action-item {
  border: 1px solid #EBEEF5;
  border-radius: 4px;
  transition: all 0.3s;
}

.quick-action-item:hover {
  border-color: #409EFF;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.action-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 20px;
  text-decoration: none;
  color: #606266;
}

.action-link span {
  margin-top: 10px;
  font-size: 14px;
}

.table-card {
  min-height: 400px;
}

.empty-table {
  padding: 20px 0;
}
</style>